<template>
  <el-dialog v-model="dialogVisible" :before-close="closeDialog" class="folder-picker-dialog" :close-on-click-modal="false" :show-header="false" title="路径选择" width="500px" draggable>
    <div class="dialog-header">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>
          数据目录
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,i) in pathArray" :key="i">
            <span @click="changePath(i)">{{item}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-table
      ref="singleTableRef"
      :data="fileDatas"
      highlight-current-row
      height="400px"
      style="width: 100%"
      @row-dblclick="handleRowDblClick"
      @current-change="handleCurrentChange"
    >
      <el-table-column property="name" >
        <template #default="scope">
          <el-icon v-if="scope.row.link.type == 'application/json'"><Folder /></el-icon>
          <el-icon v-else><Document /></el-icon>
          <span style="margin-left: 6px;">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
    </el-table>
      <template #footer>
          <span class="dialog-footer">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" :disabled="disabledButton" @click="confirm">确认</el-button>
          </span>
      </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref, toRef, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowRight, Document, Folder } from '@element-plus/icons-vue'
import { restHelperInstance } from '@/composables/useGeoHelper'

//文件资源目录信息
const fileDatas = ref<any[]>([])
//当前选中的资源
const currentSelected = ref<any>()
//要素属性表单
const featureAttributeForm = ref<Record<string, any>>({})
interface emitInterface {
  (e: 'update:visible', v: boolean): void
  (e: 'picked', v:string): void
}

const emit = defineEmits<emitInterface>()
interface propsType {
  pickType: "Folder" | "File" | ""
  visible: boolean
}
const props = withDefaults(defineProps<propsType>(), {
  visible: false,
  pickType:""
})
const dialogVisible = toRef(props, 'visible')
const pathArray = ref<string[]>(['data']);

const currentSelectedType = computed(()=>{
  return currentSelected.value? currentSelected.value.link.type == 'application/json'? "Folder": "File" :""
})

const disabledButton = computed(()=>{
  return currentSelected.value? props.pickType?props.pickType == currentSelectedType.value?false:true:false : true
})

const changePath = (i:number) => {
  pathArray.value = pathArray.value.splice(0, i + 1);
  loadFileResource("/" + pathArray.value.join("/"));
}

/**
 * @description: 加载文件资源
 * @param {*} relativePath
 * @return {*}
 */
const loadFileResource = (relativePath:string)=>{
  restHelperInstance.getResourceDirectoryInfo(relativePath).then(res=>{
      console.log(res.ResourceDirectory),
      fileDatas.value = res.ResourceDirectory.children.child;
  })
}

/**
 * @description: 行选择事件
 * @param {*} row
 * @return {*}
 */
const handleCurrentChange = (row: any) => {
  currentSelected.value = row
}

/**
 * @description: 行双击事件
 * @param {*} row
 * @return {*}
 */
const handleRowDblClick = (row: any) => {
  pathArray.value.push(row.name)
  loadFileResource("/" + pathArray.value.join("/"));
}

/**
 * @description: 确认
 * @return {*}
 */
const confirm = ()=>{
  emit('picked', `file:${pathArray.value.join("/")}/${currentSelected.value.name}`)
  closeDialog()
}
const closeDialog = () => {
  pathArray.value = ["data"]
  fileDatas.value = []
  emit('update:visible', false)
}

watch(
  () => dialogVisible.value,
  () => {
      if (dialogVisible.value) {
        loadFileResource("/data")
      }
  },
  {
      immediate: true,
  },
)
onBeforeMount(() => {})
</script>

<style lang="scss">
.folder-picker-dialog {
  .dialog-header{
    .el-breadcrumb{
      .el-breadcrumb__item{
        .el-breadcrumb__inner{
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__body{
    padding: 20px 20px 0;
  }
  .el-dialog__footer {
    padding: 20px;
    text-align: center;
  }
}
</style>
